<template>
  <div>
    <div class="line"></div>
    <h2 style="color: grey">学生信息</h2><br>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学号查询">
        <el-input v-model="formInline.stuselcode" placeholder="学号"></el-input>
      </el-form-item>
      <el-form-item label="姓名查询:">
        <el-input v-model="formInline.stuselname" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="专业查询:">
        <el-input v-model="formInline.stuselprofession" placeholder="专业"></el-input>
      </el-form-item>
      <el-form-item label="班级查询:">
        <el-input v-model="formInline.stuselclass" placeholder="班级"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectAllstu">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width:95%;margin-left:auto;margin-right: auto"
      fit
      @row-click="selectStuInfo"
    >
      <el-table-column
        prop="stu_code"
        label="学生学号"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="stu_name"
        label="学生姓名"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="stu_sex"
        label="学生性别"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="stu_tel"
        label="电话号码"
        align="center"
      >
      </el-table-column>


      <el-table-column
        prop="stu_email"
        label="电子邮箱"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="stu_department"
        label="学院"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="stu_profession"
        label="专业"
        align="center"
      >
      </el-table-column>


      <el-table-column
        prop="u_acount"
        label="系统账号"
        align="center"
      >
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        prop="u_status"
      >
        　　　<template slot-scope="scope">
        　　　  <span v-if="scope.row.u_status== '1'">
                      <el-button type="primary" plain @click="alertStuInfo">详情</el-button>
                      <el-button type="danger" plain @click="disableStuInfo" >禁用</el-button>
                   </span>
        　　　  <span v-if="scope.row.u_status== '2'">
                       <el-button type="primary" plain @click="alertStuInfo">详情</el-button>
                      <el-button type="danger" plain @click="enableStuInfo" >启用</el-button>
                 </span>
        　　　</template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="学生详细信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first">
          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-col :span="11">
                <el-form-item label="姓名:">
                  <el-input v-model="stuname" placeholder="" readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="性别:">
                  <el-input v-model="stusex" placeholder="" readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="电话号码:">
                  <el-input v-model="stutel" placeholder="" readonly="readonly" ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11">
                <el-form-item label="电子邮箱:">
                  <el-input v-model="stuemail" placeholder="" readonly="readonly" ></el-input>
                </el-form-item>
              </el-col>

            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="学籍信息" name="second">
          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-col :span="11">
                <el-form-item label="学号:">
                  <el-input v-model="stucode" placeholder="" readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="学历:">
                  <el-input v-model="stueducation" placeholder="" readonly="readonly"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11">
                <el-form-item label="院系:">
                  <el-input v-model="studepartment" placeholder="" readonly="readonly"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11">
                <el-form-item label="专业:">
                  <el-input v-model="stuprofession" placeholder="" readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </div>

        </el-tab-pane>
        <el-tab-pane label="就业信息" name="third">

          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-col :span="11">
                <el-form-item label="就业状态:">
                  <el-input v-model="stucompjobstatus" placeholder="" readonly="readonly"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="企业名称:">
                  <el-input v-model="stucompname" placeholder="" readonly="readonly"></el-input>
                </el-form-item>
              </el-col>

            </el-form>
          </div>

        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
<!--      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
  </span>
    </el-dialog>



  </div>

</template>

<style>
  body {
    background-color: 	#F5F5F5;

  }
</style>

<script>

  export default {
    name: "index",
    data() {
      return {
        username:window.sessionStorage.getItem("u_name"),
        tableData: [],
        dialogVisible: false,
        stucode:'',
        stuname:'',
        stusex:'',
        stutel:'',
        stuemail:'',
        studepartment:'',
        stuprofession:'',
        stucompjobstatus:'',
        stucompname:'',
        stueducation:'',
        u_status:'',
        u_acount:'',
        formInline: {
          stuselcode: '',
          stuselname: '',
          stuselprofession: '',
          stuselclass: ''
        }

      }
    },
    created() {
      this.selectAllstu();
    },
    methods: {
      selectAllstu: function () {
        this.$axios({
          url: `/api/teaOperat/selectAllStuVue/`+ "?stu_code=" + this.formInline.stuselcode+"&stu_name="+this.formInline.stuselname
          +"&stu_profession="+ this.formInline.stuselprofession+"&stu_class="+this.formInline.stuselclass,
          method: 'get',
        }).then(stulist => {  // 请求成功
          this.tableData = stulist.data.data;

        }).catch(error => {  // 请求失败

        });
      },
      selectStuInfo: function (stuinfo) {
        this.$axios({
          url: `/api/stuOperat/selectStuByStuCode/` + "?stu_code=" + stuinfo.stu_code,
          method: 'get',
        }).then(stuInfoByCode => {  // 请求成功
          this.stucode=stuInfoByCode.data.stu_code;
          this.stuname=stuInfoByCode.data.stu_name;
          this.stusex=stuInfoByCode.data.stu_sex;
          this.stutel=stuInfoByCode.data.stu_tel;
          this.stuemail=stuInfoByCode.data.stu_email;
          this.studepartment=stuInfoByCode.data.stu_department;
          this.stuprofession=stuInfoByCode.data.stu_profession;
          this.stucompjobstatus=stuInfoByCode.data.stu_compjobstatus;
          this.stucompname=stuInfoByCode.data.stu_compname;
          this.stueducation=stuInfoByCode.data.stu_education;
          this.u_acount = stuInfoByCode.data.u_acount;
        }).catch(error => {  // 请求失败

        });
      },

      alertStuInfo: function () {
        this.dialogVisible = true;
      },

      loginout:function () {
        this.$axios({
          url: `/api/user/loginout/`,
          method: 'get',
        }).then(loginOut => {  // 请求成功
          console.log('请求成功');
          console.log(loginOut.data);
          window.location.href = "/#/login";
        }).catch(error => {  // 请求失败
        });
      },

      disableStuInfo:function(){
          this.$axios({
            url: `/api/manOperat/disableUser/`+"?u_acount="+this.u_acount,
            method: 'get',
          }).then(loginOut => {  // 请求成功
            console.log('请求成功');
            console.log(loginOut.data);
            alert("禁用成功!");
            location.reload();
          }).catch(error => {  // 请求失败
          });

      },
      enableStuInfo:function () {
        this.$axios({
          url: `/api/manOperat/enableUser/`+"?u_acount="+this.u_acount,
          method: 'get',
        }).then(loginOut => {  // 请求成功
          console.log('请求成功');
          console.log(loginOut.data);
          alert("启用成功!");
          location.reload();
        }).catch(error => {  // 请求失败
        });
      },
      onSubmit() {
        console.log('submit!');
      }






    }

  }


</script>
